<template>
  <div class="edit-table">
    <table @dblclick="handleDblclick">
      <tbody>
        <tr v-for="(item, row) in tableData" :key="row">
          <td v-for="(e, col) in item" :key="col" :class="{ selected: curTd === row + ',' + col }" @click="handleClickCell(row, col)">
            <px-input v-if="canEdit && curTd === row + ',' + col" v-model="tableData[row][col]" v-focus @blur="handleBlur" />
            <span v-else>{{ e }}</span>
          </td>
        </tr>
      </tbody>
    </table>
    <div>
      <button @click="addRow">添加新行</button>
      <button @click="addCol">添加新列</button>
      <button @click="deleteRow">删除行</button>
      <button @click="deleteCol">删除列</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useComponent } from "@visual/stores";
import { computed, ref } from "vue";
import { PxMessage } from "px-ui";

const vFocus = {
  mounted: el => el.querySelector("input").focus()
};

const curTd = ref("");
const canEdit = ref(false);
const curTdBackUp = ref("");

const componentStore = useComponent();
const tableData = computed(() => (componentStore.curComponent?.propValue as Record<string, any>).data);

function handleDblclick() {
  canEdit.value = true;
}

function handleClickCell(row, col) {
  curTd.value = row + "," + col;
  curTdBackUp.value = curTd.value;
}

function handleBlur() {
  canEdit.value = false;
  curTd.value = "";
}

function addRow() {
  tableData.value.push(new Array(tableData.value[0]?.length || 1).fill(" "));
}

function addCol() {
  if (tableData.value.length) {
    tableData.value.forEach(item => item.push(" "));
  } else {
    tableData.value.push([" "]);
  }
}

function deleteRow() {
  if (!curTdBackUp.value) {
    PxMessage.error("请先选择要删除的行");
    return;
  }

  const row = curTdBackUp.value.split(",")[0];
  tableData.value.splice(row, 1);
}

function deleteCol() {
  if (!curTdBackUp.value) {
    PxMessage.error("请先选择要删除的列");
    return;
  }

  const col = curTdBackUp.value.split(",")[1];
  tableData.value.forEach(item => {
    item.splice(col, 1);
  });
}
</script>

<style lang="scss" scoped>
.edit-table {
  margin-bottom: 8px;
  overflow: auto;

  & > div {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 18px;

    button {
      box-sizing: border-box;
      padding: 4px 10px;
      margin: 0;
      margin-bottom: 10px;
      font-size: 14px;
      font-weight: 500;
      color: #606266;
      text-align: center;
      cursor: pointer;
      background: #fff;
      border: 1px solid #dcdfe6;
      border-radius: 4px;
      outline: 0;

      &:hover {
        color: #409eff;
        background: #ecf5ff;
      }
    }
  }

  table {
    font-size: 12px;
    text-align: center;
    word-break: break-all;
    word-wrap: break-word;
    border-collapse: collapse;

    td {
      min-width: 60px;
      max-width: 80px;
      height: 40px;
      padding: 10px;
      border: 1px solid #ebeef5;
    }
  }

  .selected {
    color: #409eff;
    background: #ecf5ff;
  }
}
</style>
